<template>
  <div id="app">
    <TopBar></TopBar>
    <center></center>
    <MusicPlayer></MusicPlayer>
  </div>
</template>

<script>
import TopBar from './views/top/TopBar.vue'
import Center from './views/center/Center.vue'
import MusicPlayer from './views/bottom/MusicPlayer.vue'
export default {
  name: 'app',
  components: {
    TopBar,
    Center,
    MusicPlayer
  }
}
</script>

<style lang="less">
  #app {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  ::-webkit-scrollbar {
  width: 10px; /*对垂直流动条有效*/
  // height: 10px; /*对水平流动条有效*/
  }
  /*定义滚动条的轨道颜色、内阴影及圆角*/
  ::-webkit-scrollbar-track{
  // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  // background-color: #ebebeb;
  // border-radius: 3px;
  }
  /*定义滑块颜色、内阴影及圆角*/
  ::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #51aef9;
  }
  /*定义两端按钮的样式*/
  // ::-webkit-scrollbar-button {
  // background-color:#efefef;
  // }
  /*定义右下角汇合处的样式*/
  ::-webkit-scrollbar-corner {
  background:khaki;
  }
</style>
